<template>
<div>

<el-row>

	<el-form :inline="true" :model="form" >
		

		<el-form-item >
		    <el-input v-model="form.name" placeholder="名称" ></el-input>
		</el-form-item>

	    <el-form-item >
		    <el-input v-model="form.hb_name" placeholder="环保联系人"></el-input>
		</el-form-item>

		<el-form-item >
		    <el-input v-model="form.lxr_name" placeholder="联系人"></el-input>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="init">查询</el-button>
		</el-form-item>

		<el-form-item>
		    <el-button type="success" @click="add">添加</el-button>
		</el-form-item>

	</el-form>
	</el-row>

	<el-row>

	<el-table
	    :data="subUnloadingList.results"
	    border
	    style="width: 100%">
	    <el-table-column
	      prop="name"
	      label="名称"
	      width="150">
	    </el-table-column>
	    <el-table-column
	      prop="industry_type_name"
	      label="行业类型"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="company_type_name"
	      label="单位类型"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="hb_name"
	      label="环保联系人"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="hb_mobile"
	      label="环保联系人电话"
	      width="150">
	    </el-table-column>
	    <el-table-column
	      prop="lxr_name"
	      label="负责人"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="lxr_phone"
	      label="负责人电话"
	      width="150">
	    </el-table-column>
	    <el-table-column
	      prop="longitude"
	      label="经度"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      prop="latitude"
	      label="纬度"
	      width="100">
	    </el-table-column>
	    <el-table-column
	      fixed="right"
	      width="100"
	      label="操作">
	      	<template slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>

	</el-row>


	<el-row class="text-right mt20 mb20">
	<el-pagination
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
	  :current-page="pageNo"
	  :page-size="pageSize"
	  layout="total, sizes, prev, pager, next"
	  :total="subUnloadingList.totalRecord">
	</el-pagination>
</el-row>


<el-dialog title="企业信息" width="90%" :visible.sync="dialogFormVisible">
	<el-col :span="12">
		<el-form ref="current" :model="current"
		label-width="200px"	
		status-icon
		:rules="rules2" 
		>
			<el-form-item label="名称:" prop="name">
				<el-input v-model="current.name" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="负责人:" prop="lxr_name">
				<el-input v-model="current.lxr_name" class="w300"></el-input>
			</el-form-item>
			<el-form-item label="负责人电话':" prop="lxr_phone">
				<el-input v-model="current.lxr_phone" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="地区:" >
				<el-cascader 
				class="w300"
				:options="districtData"
				:props="props"
				filterable
				v-model="current.selectedOptions">
				</el-cascader>
			</el-form-item>


			<el-form-item label="地址:" >
				<el-input v-model="current.address" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="位置:" >
				<!-- <el-input v-model="current.address" class="w300"></el-input> -->
				经度：{{current.longitude}}, 纬度：{{current.latitude}}
			</el-form-item>

			<el-form-item label="" >
				<el-button type="primary" @click="getPosition">选取坐标</el-button>
			</el-form-item>

			<!-- <el-form-item label="经度:" prop="longitude">
				<el-input v-model="current.longitude" class="w300"></el-input>
			</el-form-item>
			<el-form-item label="纬度:" prop="latitude">
				<el-input v-model="current.latitude" class="w300"></el-input>
			</el-form-item> -->

			<el-form-item label="行业类型:" prop="industry_type">
			    <!-- <el-input  v-model="current.industry_type_name" class="input-with-select w300" disabled>
			    <el-button slot="append" @click="chooseIndustry">选择</el-button>
			    </el-input> -->
			    <el-select v-model="current.industry_type" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in industry_type"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="单位类型:" >
				<el-select v-model="current.company_type" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in company_type"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>


			<el-form-item label="环保联系人:" prop="hb_name">
				<el-input v-model="current.hb_name" class="w300"></el-input>
			</el-form-item>
			<el-form-item label="环保联系人电话:" prop="hb_mobile">
				<el-input v-model="current.hb_mobile" class="w300"></el-input>
			</el-form-item>

			

			<el-form-item label="是否重点源:" >
				<el-select v-model="current.iszdy" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			

			

			
		</el-form>
	</el-col>

  	<el-col :span="12">
		<el-form ref="device"
		label-width="200px"	
		>
			<el-form-item label="机构代码:" >
				<el-input v-model="current.jgdm" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="组织机构代码:" >
				<el-input v-model="current.zzjgdm" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="占地面积:" >
				<el-input v-model="current.zdmj" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="单位网站:" >
				<el-input v-model="current.dwwz" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="对象介绍:" >
				<el-input type="textarea" v-model="current.dxjs" class="w300"></el-input>
			</el-form-item>
			

			<el-form-item label="是否在线监控企业:" >
				<el-select v-model="current.iszxjkqy" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="生产状态:" >
				<el-select v-model="current.sczt" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in sczt"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="是否固废经营单位:" >
				<el-select v-model="current.isgfjydw" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="是否固费产生单位:" >
				<el-select v-model="current.isgfcsdw" class="w300" placeholder="请选择">
					<el-option
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="是否风险源:" >
				<el-select v-model="current.isfxy" class="w300" placeholder="请选择">
					<el-option 
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="排污口是否规范化:" >
				<el-select v-model="current.ispwkgfh" class="w300" placeholder="请选择">
					<el-option 
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item label="是否上市公司:" >
				<el-select v-model="current.isssgs" class="w300" placeholder="请选择">
					<el-option 
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item v-if="current.isssgs == '1'" label="股票代码:" >
				<el-input v-model="current.gpdm" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="是否所属集团公司:" >
				<el-select v-model="current.isssjtgs" class="w300" placeholder="请选择">
					<el-option 
				      v-for="item in yesOrNo"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
			</el-form-item>

			<el-form-item v-if="current.isssjtgs == '1'" label="所属集团公司名称:" >
				<el-input v-model="current.ssjtgsmc" class="w300"></el-input>
			</el-form-item>

			<el-form-item v-if="current.isssjtgs == '1'" label="所属集团公司组织机构代码:" >
				<el-input v-model="current.ssjtgszzjgdm" class="w300"></el-input>
			</el-form-item>

			<el-form-item v-if="current.isssjtgs == '1'" label="所属集团公司股票代码:" >
				<el-input v-model="current.ssjtgsgpdm" class="w300"></el-input>
			</el-form-item>

		</el-form>

	</el-col>




	<el-dialog
      width="60%"
      title="行业类型"
      :visible.sync="hangyeDialogFormVisible"
      append-to-body>

      	<el-row>
      	<el-form ref="device"
		label-width="200px"	
		>
			<el-form-item label="行业名称（说明）:" >
				<el-input v-model="hangye.describe" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="小类代码:" >
				<el-input v-model="hangye.small_type" class="w300"></el-input>
			</el-form-item>

			<el-form-item label="门类:" >
				<el-cascader 
				style="width:400px;"
				filterable
				:options="hangyeList"
				:props="props1"
				filterable
				change-on-select
				v-model="selectedOptions">
				</el-cascader>

				<el-button type="success" @click="init1">查 询</el-button>
			</el-form-item>
			
		</el-form>
		</el-row>


		<el-row>
			<el-table
		    :data="hangyeListPage.results"
		    border
		    highlight-current-row
		    @current-change="handleCurrentChange"
		    style="width: 100%">
		    <el-table-column
		      prop="door_type"
		      label="门类"
		      width="50">
		    </el-table-column>
		    <el-table-column
		      prop="big_type"
		      label="大类"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="middle_type"
		      label="中类"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="small_type"
		      label="小类"
		      width="80">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="类别名称"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="describe"
		      label="说明"
		      >
		    </el-table-column>
		  </el-table>

		</el-row>

		<el-row class="text-right mt20 mb20">
			<el-pagination
			  @size-change="handleSizeChange1"
			  @current-change="handleCurrentChange1"
			  :current-page="pageNo1"
			  :page-size="pageSize1"
			  layout="total, sizes, prev, pager, next"
			  :total="hangyeListPage.totalRecord">
			</el-pagination>
		</el-row>

		<div slot="footer" class="dialog-footer">
			<el-button @click="hangyeDialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="getHangye">确 定</el-button>
		</div>

    </el-dialog>


	<el-dialog
	title="选取坐标"
	:visible.sync="positionDialogVisible"
	append-to-body
	:fullscreen="true"
	width="90%">
		<position v-on:save="saveposition"></position>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		</span>
	</el-dialog>


  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="create">确 定</el-button>
  </div>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import District from 'ydui-district/dist/gov_province_city_area';
import position from '@/components/position/index'


export default {
	
	name : 'unloading',
	
	data () {
		return {
		  	pageNo : 1,
			pageSize : 10,

			pageNo1 : 1,
			pageSize1 : 10,

			gridid : this.obj.id,

			form : {},

			subUnloadingList : {},

			dialogFormVisible : false,

			current : {
				selectedOptions : [],
			},

			company_type : [],

			industry_type : [],

			industry_type : [],

			value : '',

			what : '',

			selectedOptions : [],

			props : {
				value : 'n',
				label : 'n',
				children : 'c',
			},

			props1 : {
				value : 'id',
				label : 'name',
				children : 'c',
			},

			districtData : District,

			yesOrNo : [
				{label : '是', value : '1'},
				{label : '否', value : '0'},
			],

			sczt : [
				{label : '正常生产', value : '0'},
				{label : '停产', value : '1'},
				{label : '在建', value : '2'},
			],

			hangyeDialogFormVisible : false,

			hangye : {},

			hangyeList : [],

			hangyeListPage : {},

			currentHangye : {},



			rules2 : {
		  	  name: [
	            { required: true, message: '请输入企业名称', trigger: 'blur' },
	          ],

	          lxr_name: [
	          	{ required: true, message: '请输入负责人姓名', trigger: 'blur' },
	          ],
	          lxr_phone: [
	          	{ required: true, message: '请输入负责人电话', trigger: 'blur' },
	          ],

	          industry_type : [
	          	{ required: true, message: '请选择行业', trigger: 'change',  },
	          ],
	          // address: [
	          // 	{ required: true, message: '请输入详细地址', trigger: 'blur' },
	          // ],
	          // selectedOptions: [
	          // 	{ type: 'array', required: true, message: '请选择区域', trigger: 'change',  },
	          // 	// { type: 'array', len : 3, message: '必须选择三级', trigger: 'change' }
	          // ],
	          // longitude: [
	          // 	{ required: true, message: '请输入精度', trigger: 'blur' },
	          // ],
	          // latitude: [
	          // 	{ required: true, message: '请输入维度', trigger: 'blur' },
	          // ],
	          hb_name: [
	          	{ required: true, message: '请输入环保联系人姓名', trigger: 'blur' },
	          ],
	          hb_mobile: [
	          	{ required: true, message: '请输入环保联系人电话', trigger: 'blur' },
	          ],
	          // iszdy: [
	          // 	{ required: true, message: '请选择是否重点源', trigger: 'change' },
	          // ],
	          
	        },

	        positionDialogVisible : false,
		}
	},

	props : {
		obj: {
			type: Object,
			default () {
				return {}
			},
		},
	},

	components : {
		position,
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},


		handleSizeChange1 (val) {
			this.pageSize1 = val;
			this.init1();
		},

		handleCurrentChange1 (val) {
			this.pageNo1 = val;
			this.init1();
		},

		init () {
			this.$http({
				fun : 'subUnloadingList',
				grid_id : this.gridid,
				...this.form,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('subUnloadingList');
					console.log(res);
					this.subUnloadingList = res;
				}
			});
		},

		init1 () {
			const len = this.selectedOptions.length;

			let para = {
				fun : 'hangyeListPage',
				pageSize : this.pageSize1,
				pageNo : this.pageNo1,
				...this.hangye,

				cb : res => {
					console.log('分类类型列表,分页');
					console.log(res);
					this.hangyeListPage = res;
				}
			}

			if(len == 1){
				para['door_type'] = this.selectedOptions[0];
			}else if(len == 2){
				para['big_type'] = this.selectedOptions[1];
			}else if(len == 3){
				para['middle_type'] = this.selectedOptions[2];
			}else if(len == 4){
				para['small_type'] = this.selectedOptions[3];
			}

			this.$http(para);
		},

		add () {
			this.current = {
				selectedOptions : [],
			};
			this.what = 'add';
			this.dialogFormVisible = true;
		},

		create () {
			this.$refs['current'].validate((valid) => {
				if (valid) {
					let para = {
						fun : 'createUnloading',
						...this.current,
						type : this.current.company_type,
						address_province : this.current.selectedOptions[0],
						address_city : this.current.selectedOptions[1],
						address_area : this.current.selectedOptions[2],
						cb : res => {
							console.log(res);
							this.$message.success('操作成功');
							this.dialogFormVisible = false;
							this.init();
						},
						err : res => {
							console.log(res);
							this.$message.error('操作失败 : ' + res);
						}
					};

					if(this.what == 'add'){
						para['grid_id'] = this.gridid;
					}else if(this.what == 'edit'){
						para['id'] = this.current.id;
					}

					this.$http(para);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		edit (item) {
			console.log(item);
			this.what = 'edit';
			this.$http({
				fun : 'unloadingInfo',
				id : item.id,
				cb : res => {
					console.log(res);
					this.current = res;
					this.current.selectedOptions = [res.address_province, res.address_city, res.address_area];
					this.dialogFormVisible = true;
				}
			});
		},

		del (item) {
			console.log(item);

			this.$confirm('此操作将永久删除该单位, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
					fun : 'createUnloading',
					id : item.id,
					del_flag : 1,
					cb : res => {
						console.log(res);
						this.$message.success('操作成功');
						this.init();
					},
					err : res => {
						this.$message.error('操作失败');
					}
				});
	          
	        }).catch(() => {
	                   
	        });
		},

		chooseIndustry () {
			console.log('chooseIndustry');
			this.hangyeDialogFormVisible = true;
		},

		handleCurrentChange (item) {
			console.log(item);
			this.currentHangye = item;
		},

		getHangye () {
			this.current.industry_type = this.currentHangye.id;
			this.current.industry_type_name = this.currentHangye.name;
			this.hangyeDialogFormVisible = false;
			this.currentHangye = {};
		},

		search () {
			
		},

		getPosition () {
			this.positionDialogVisible = true;
		},

		saveposition (item) {
			this.current.longitude = item.lng;
			this.current.latitude = item.lat;
			this.positionDialogVisible = false;
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
		this.init1();

		this.$http({
			fun : 'getListByType',
			type : 'company_type',
			cb : res => {
				console.log(res);
				this.company_type = res;
			}
		});

		this.$http({
			fun : 'getListByType',
			type : 'industry_type',
			cb : res => {
				console.log(res);
				this.industry_type = res;
			}
		});

		this.$http({
			fun : 'hangyeList',
			cb : res => {
				console.log('行业类别列表');
				console.log(res);
				
				const result = this.$util.transData(res, 'id', 'pid', 'c');
				console.log(result);
				this.hangyeList = result;
			}
		});
	},

}
</script>

<style scoped>
.w300 {
	width: 300px;
}
.w150{
	width: 150px;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

</style>
